<template>
	<view class="container" @tap="togglePicker(0)">
		<!--内容-->
		<view class="scroll" :style="{height: scrollHeight}">
			<scroll-view :scroll-into-view="scrollViewId" scroll-y style="height: 100%;">
				<view class="item flex-row left mt20" v-if="xt">
					<!--处理头像-->
					<view>
						<image src="@/static/order/mes.png" class="face"></image>
					</view>
					<!--文本-->
					<view class="content">
						点击下方问题也许能快速帮到您
						为您推荐一下问题:
						<view style="color:#A5CA02"> 服务范围</view>
						<view style="color:#A5CA02"> 如何下单(即时)</view>
						<view style="color:#A5CA02"> 举报/申诉</view>
					</view>
				</view>
				<view class="" class="w96 radius20  mt20"
					style="padding:40rpx; background:linear-gradient(to right, #E7F7BC, 50%, #CEEE5B);" v-else>
					<view class="flex-between">
						<view class="">
							<view class="flex" style="">
								<image src="@/static/order/tuik.png" mode=""
									style="width: 40rpx; height: 40rpx;margin-right: 30rpx;">
								</image>
								<text style="color: #000;">待服务</text>
							</view>
							<view class="mt20" style="color: #5C6D08;font-size: 24rpx;">
								等待您上门服务
							</view>
						</view>
						<view class=""
							style="border-radius: 4px;background: #E8F5BD;font-size:24rpx;padding: 15rpx;color: #5C6D08;">
							待结算
						</view>
					</view>
				</view>
				<view class="item-space"></view>
				<!-- <view class="time">晚上 10:04</view> -->
				<view v-for="(item, index) in list" :key="index">
					<view class="time">
						{{item.date}}
					</view>
					<view class="item flex-row" :class="[item.source == fromUserId ? 'right' : 'left']">
						<!--处理头像-->
						<view v-if="item.source == fromUserId">
							<image v-if="fromUserFace" :src="fromUserFace" class="face"></image>
							<image v-else src="@/static/lg.png" class="face"></image>
						</view>
						<view v-else>
							<image v-if="item.toUserFace || item.userFace" :src="item.toUserFace || item.userFace"
								class="face"></image>
							<image v-else src="@/static/lg.png" class="face"></image>
						</view>
						<!--文本-->
						<view v-if="item.msgType == 'text'" @longpress="longPress(item)" class="content flex-row">
							{{ item.content }}
						</view>
						<!--图片-->
						<image v-if="item.msgType == 'image'" @longpress="longPress(item)" :src="item.content"
							mode="widthFix" style="width: 320upx;border: 2rpx solid #000;"></image>
					</view>
				</view>
				<view id="bottom"></view>
			</scroll-view>
		</view>
		<!--输入-->
		<view class="oper flex-row" @tap.prevent.stop="">
			<input v-if="isEdit" @focus="inputFocus" :focus="isFocus" :cursor-spacing="8" :adjust-position="false"
				type="text" v-model="content" class="input" placeholder="请输入内容" />
			<view @touchend.prevent="send" v-show="content" class="btn">发送</view>
			<!--附件-->
			<image @tap="togglePicker(86, 'file')" v-show="!content" src="@/static/login/2.png" class="icon"></image>
		</view>
		<!--附件-->
		<view v-show="showFile" class="file" @tap.prevent.stop="">
			<view class="list flex-row">
				<view class="item flex-column" @tap="uploadImage(['album'])">
					<image src="@/static/lg.png" mode="widthFix" class="icon"></image>
					<view class="text">相册</view>
				</view>
				<view class="item flex-column" @tap="uploadImage(['camera'])">
					<image src="@/static/lg.png" mode="widthFix" class="icon"></image>
					<view class="text">拍照</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emojis: [],
				isEdit: true,
				isFocus: false,
				xt: null,
				showFile: false,
				showVoice: false,
				scrollHeight: 'auto', // 内容区域高度
				statusBarHeight: 0, // 状态栏高度
				scrollViewId: '', // 滚动到最底部
				voicePlayingId: '', // 正在播放的消息ID
				content: '',
				list: [],
				socketOpen: false,
				socketMsgQueue: [],
				// fromUserId: uni.getStorageSync('userId'), // 本地用户id
				fromUserId: "123",
				fromUserFace: uni.getStorageSync('userFace'),
				toUserId: '',
				toUserName: '',
			}
		},
		onLoad(option) {
			// 初始化内容高度
			this.setScrollHeight()

			// 初始化状态栏高度
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
				}
			})



			// 设置标题
			uni.setNavigationBarTitle({
				title: option.toUserName
			})

			// 获取参数
			this.toUserId = option.toUserId
			this.toUserName = option.toUserName
			// 是不是系统消息？
			this.xt = Number(option.xt)
			console.log(this.xt,'xxxxxxtttt')
			// 获取消息记录
			this.getList()

			// // 监听webSocket消息
			// this.$xbcim.onmessage(data=>{
			// 	// 只接受单聊消息
			// 	if(data.type != 'single') return

			// 	// 处理数据
			// 	data.id = data.extra.id
			// 	data.userFace = data.extra.userFace
			// 	this.list.push(data)
			// 	this.initScrollBar()
			// })
		},
		onHide() {},
		onBackPress() {
			if (this.showFile || this.showEmoji) {
				this.showFile = false
				// this.showEmoji = false
				this.setScrollHeight(0)
				return true
			}
			return false
		},
		methods: {
			// 初始化滚动
			initScrollBar() {
				setTimeout(() => {
					this.scrollViewId = ''
					setTimeout(() => {
						this.scrollViewId = 'bottom'
						setTimeout(() => {
							this.scrollViewId = ''
						}, 100)
					}, 100)
				}, 100)
			},
			// 监听输入聚焦
			inputFocus(e) {
				this.setScrollHeight(e.detail.height)
				this.initScrollBar()

				uni.onKeyboardHeightChange(res => {
					this.setScrollHeight(res.height)
					this.initScrollBar()
				})
			},
			// 设置scroll的高度
			setScrollHeight(descHeight = 0) {
				// #ifdef MP-WEIXIN
				this.scrollHeight = `calc(100vh - 110rpx - ${descHeight}px)`
				// #endif
				// #ifdef APP-PLUS
				this.scrollHeight = `calc(100vh - 110upx - ${descHeight}px)`
				// #endif
				// #ifdef H5
				this.scrollHeight = `calc(100vh - 110upx - 88rpx - ${descHeight}px)`
				// #endif
			},
			// 切换选择
			togglePicker(height = 0, type = '') {
				// this.showEmoji = false
				this.showFile = false
				let status = height > 0 ? true : false

				switch (type) {
					// case 'emoji':
					// 	this.showEmoji = status; break
					case 'file':
						this.showFile = status;
						break
				}

				setTimeout(() => {
					this.setScrollHeight(height)
					this.initScrollBar()
				}, 50)
			},

			// 上传
			upload(filePath) {
				// this.$util.loading('上传中')
				console.log("upload-filePath:", filePath)
				// uni.uploadFile({
				// 	url: this.$api.upload,
				// 	name: 'file',
				// 	filePath,
				// 	formData: {
				// 		userId: this.fromUserId
				// 	},
				// 	header: this.$util.getHeader(),
				// 	success: res=>{
				// 		uni.hideLoading()
				// 		let data = JSON.parse(res.data)
				// 		this.pushMessage(data.data, 'voice')
				// 	},
				// 	fail: err=>{
				// 		uni.hideLoading()
				// 	}
				// })
			},
			// 播放录音
			playVoice(item) {
				if (this.voicePlayingId) {
					this.voicePlayingId = ''
				} else {
					this.voicePlayingId = item.id

				}
			},
			// 长按 撤回消息
			longPress(msg) {
				let data = {
					type: 'single',
					source: this.fromUserId,
					dest: this.toUserId,
					timestamp: new Date().getTime(),
					msg: {
						id: msg.id,
						fromUserId: msg.fromUserId,
						toUserId: msg.toUserId,
						type: 'cancel',
						content: msg.content
					}
				}

				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: res => {
						// 撤销本地消息
						this.list = this.list.map(item => {
							item.type = item.id == msg.id ? 'cancel' : item.type
							return item
						})
					}
				})
			},
			// 获取位置
			getLocation() {
				uni.getLocation({
					success: res => {
						let {
							latitude,
							longitude
						} = res
						uni.chooseLocation({
							latitude,
							longitude,
							success: chooseRes => {
								this.pushMessage(JSON.stringify(chooseRes), 'map')
							}
						})
					}
				})
			},
			// 打开位置
			openLocation(content) {
				let {
					latitude,
					longitude
				} = JSON.parse(content)
				uni.openLocation({
					latitude,
					longitude
				})
			},
			// 发送图片
			uploadImage(sourceType = ['album']) {
				uni.chooseImage({
					sourceType,
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;

						tempFilePaths.forEach(temp => {
							console.log(temp)
							this.list.push({
								source: "123",
								target: "1",
								content: temp,
								userFace: "",
								type: 'single',
								msgType: "image",
								date: new Date().getFullYear() + "-" + (new Date().getMonth() +
										1) + '-' + (new Date().getDay() + 1) + ' ' + new Date()
									.getHours() + ':' + new Date().getMinutes()
							})
							setTimeout(() => {
								this.setScrollHeight(0)
								this.initScrollBar()
							}, 50)
							// this.$util.loading('上传中')
							// uni.uploadFile({
							// 	url: this.$api.upload,
							// 	filePath: temp,
							// 	formData: {
							// 		userId: this.fromUserId
							// 	},
							// 	name: 'file',
							// 	header: this.$util.getHeader(),
							// 	success: uploadRes => {
							// 		uni.hideLoading()
							// 		let data = JSON.parse(uploadRes.data)
							// 		this.pushMessage(data.data, 'image')
							// 	},
							// 	fail: err => {
							// 		uni.hideLoading()
							// 	}
							// })
						})
					}
				})
			},
			// 发送消息
			send() {
				this.pushMessage(this.content, 'text', () => {
					this.content = ''
				})
			},
			// 推送消息
			pushMessage(content, type = 'text', cb = () => {}) {
				// // 组合消息体：需要保存在本地数据库的数据
				// let msgData = {
				// 	fromUserId: this.fromUserId,
				// 	userFace: uni.getStorageSync('userFace'),
				// 	toUserId: this.toUserId,
				// 	type,
				// 	content
				// }

				this.list.push({
					source: "123",
					target: "1",
					content: content,
					userFace: "",
					type: 'single',
					msgType: "text",
					date: new Date().getFullYear() + "-" + (new Date().getMonth() +
							1) + '-' + (new Date().getDay() + 1) + ' ' + new Date()
						.getHours() + ':' + new Date().getMinutes()
				})
				this.content = ''
				setTimeout(() => {
					this.setScrollHeight(0)
					this.initScrollBar()
				}, 50)
				return
				// 本地保存
				uni.request({
					method: 'POST',
					url: this.$api.addSingleMsg,
					data: msgData,
					header: this.$util.getHeader(),
					success: res => {
						if (res.data.code) {
							return this.$util.toast(res.data.code)
						}
						let msgId = res.data.data

						// 判断是否为非文本
						if (!['text', 'map'].includes(type)) {
							msgData.content = this.$api.staticPath + msgData.content
						}

						// 发送单聊消息
						this.$xbcim.sendSingle({
							content: msgData.content,
							msgType: type,
							source: this.fromUserId,
							target: this.toUserId,
							extra: {
								id: msgId,
								userFace: uni.getStorageSync('userFace')
							}
						})

						// 加入信息
						this.list.push({
							source: this.fromUserId,
							target: this.toUserId,
							content: msgData.content,
							userFace: uni.getStorageSync('userFace'),
							type: 'single',
							msgType: type
						})

						// 初始化滚动条
						this.initScrollBar()
						cb ? cb() : this.togglePicker(0, 'file')
					}
				})
			},
			// 获取记录
			getList() {
				this.list = [{
					type: "single",
					userFace: "../../static/order/mes.png",
					source: "1",
					target: "123",
					fromUserId: "1",
					unReadNumebr: "", // 未读消息
					name: "老王",
					content: "你好",
					msgType: 'text',
					date: "2015-12-01"
				}, {
					type: "single",
					userFace: "../../static/order/mes.png",
					source: "1",
					target: "123",
					fromUserId: "1",
					unReadNumebr: "", // 未读消息
					name: "老李",
					content: "你好，1",
					msgType: 'text',
					date: "2015-12-01"
				}, ]
				// uni.request({
				// 	url: this.$api.getSingleRecord,
				// 	data: {
				// 		fromUserId: this.fromUserId,
				// 		toUserId: this.toUserId
				// 	},
				// 	header: this.$util.getHeader(),
				// 	success: res=>{
				// 		this.list = res.data.data.map(item=>{
				// 			if(['voice', 'image'].includes(item.type)){
				// 				item.content = this.$api.staticPath+item.content
				// 			}
				// 			if(item.toUserFace){
				// 				item.toUserFace = this.$api.staticPath+item.toUserFace
				// 			}

				// 			// 为了和socket的字段一致，此处做一个转换；
				// 			// 数据表字段可以直接设置为source、target和msgType
				// 			item.source = item.fromUserId
				// 			item.target = item.toUserId
				// 			item.msgType = item.type
				// 			return item
				// 		})

				// 		this.scrollViewId = ''
				// 		setTimeout(()=>{
				// 			this.scrollViewId = 'bottom'
				// 			setTimeout(()=>{this.scrollViewId = ''}, 100)
				// 		}, 100)
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;
	}

	/* #ifdef H5 */
	.container {
		height: calc(100vh - 88upx);
	}

	/* #endif */

	.container,
	.file {
		background-color: #F3F3F3;
	}

	.header {
		border-bottom: 2upx solid #EEE;

		.center {
			font-weight: bold;
		}
	}


	.file {
		padding: 30upx 20upx;

		.list {
			overflow: hidden;
			padding-left: 10upx;
			justify-content: flex-start;
		}

		.item {
			float: left;
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
			margin-right: 40upx;
			background-color: #FFF;

			.icon {
				width: 50upx;
			}

			.text {
				font-size: 24upx;
				margin-top: 4upx;
			}
		}
	}

	.oper {
		height: 110upx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-top: 2upx solid #fff;
		border-bottom: 2upx solid #fff;
		background-color: #fff;

		.input {
			height: 68upx;
			line-height: 68upx;
			padding: 0 20upx;
			font-size: 28upx;
			border-radius: 120upx;
			background-color: #F4F4F4;
			width: calc(100% - 40upx - 60upx);
		}

		.icon {
			width: 60upx;
			height: 60upx;
		}

		.btn {
			color: #fff;
			width: 90upx;
			height: 52upx;
			font-size: 24upx;
			line-height: 52upx;
			text-align: center;
			border-radius: 10upx;
			background-color: #2BA245;
		}
	}

	.scroll {
		overflow-y: auto;
		transition: all 0.1s ease;
		height: calc(100vh - 88upx - 110upx - var(--status-bar-height));

		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 88upx - var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 88upx - 110upx - var(--status-bar-height));
		/* #endif */

		.item-space {
			height: 30upx;
		}

		.time {
			color: #666;
			font-size: 24upx;
			text-align: center;
			margin-bottom: 20upx;
		}

		.cancel {
			width: 100%;
			height: 40upx;
			text-align: center;
			margin-bottom: 30upx;

			.text {
				color: #999;
				font-size: 24upx;
			}
		}

		.item {
			margin: 0 30upx 30upx;
			align-items: flex-start;
			justify-content: flex-start;

			.face {
				width: 80upx;
				height: 80upx;
				border-radius: 10upx;
			}

			.content {
				color: #000;
				font-size: 32upx;
				min-height: 80upx;
				border-radius: 10upx;
				padding: 20upx 24upx;
				background-color: #fff;
				word-break: break-all;
				word-wrap: break-word;
				max-width: calc(100% - 100upx - 120upx);
				position: relative;

				&::before {
					content: '';
					width: 0;
					height: 0;
					border-right: 30upx solid #FFF;
					border-top: 20upx solid transparent;
					border-bottom: 20upx solid transparent;
					position: absolute;
					top: 24upx;
				}

				.voice-icon {
					width: 32upx;
					height: 40upx;
					margin-right: 180upx;
					margin-bottom: -8upx;
				}
			}

			&.left {
				.face {
					margin-right: 30upx;
				}

				.content::before {
					left: -20upx;
				}
			}

			&.right {
				flex-direction: row-reverse;

				.face {
					margin-left: 30upx;
				}

				.content {
					background-color: #A0EA6F;

					&::before {
						right: -20upx;
						transform: rotate(180deg);
						border-right: 30upx solid #A0EA6F;
					}

					.voice-icon {
						margin-right: 0;
						margin-left: 180upx;
						transform: rotate(180deg);
					}
				}
			}
		}

		#bottom {
			height: 0;
		}
	}
</style>